import React, { useState, useEffect } from "react";
import { CSSTransition } from "react-transition-group";
import down from "../../assets/images/up.png";
import up from "../../assets/images/down.png";
import MusicList from "../../components/MusicList/music-list.jsx";
import Loading from "../../components/Loading/loading.jsx";
import Comment from "../../components/Comment/comment.jsx";

import { dotWang } from "../../assets/js/utils";
import {
  SongsListDetailWrapper,
  InfoWrapper,
  SongsWrapper,
  FooterAd
} from "./style";
import {
  getSongDetail,
  getListComment,
  songListDetail
} from "../../api/summary";
import { createSong } from "../../assets/js/songModel";

function formatPlayList(detail) {
  const res = {};
  res.id = detail.id;
  res.commentCount = detail.commentCount;
  res.name = detail.name;
  res.ids = detail.trackIds.map(item => item.id).join(",");
  res.creator = detail.creator;
  res.dec = detail.description;
  res.tags = detail.tags;
  res.bgImg = detail.coverImgUrl;
  res.playCount = detail.playCount;
  return res;
}
function SongListDetail(props) {
  const [show, setShow] = useState(true);
  const [fullDec, setFullDec] = useState(false);
  const [listDetail, setDetail] = useState(null);
  const fetchData = async function() {
    try {
      const id = props.match.params.id;
      console.log(id);
      const res = await songListDetail(id);
      if (res.code === 200) {
        const detail = formatPlayList(res.playlist);
        const songs = await getSongDetail(detail.ids);
        const comments = await getListComment(detail.id);
        detail.comments = comments.comments;
        detail.songs = songs.songs.map(song => createSong(song));
        setDetail(detail);
      }
    } catch (error) {}
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <CSSTransition
      in={show}
      timeout={300}
      classNames="fly"
      appear={true}
      unmountOnExit
      onExited={() => props.history.goBack()}
    >
      <SongsListDetailWrapper>
        <InfoWrapper arrow={fullDec ? up : down}>
          <section className="top">
            <div
              className="bg"
              style={{ backgroundImage: `url(${listDetail?.bgImg})` }}
            ></div>
            <div className="wrap">
              <div
                className="img"
                onClick={() => {
                  setShow(false);
                }}
              >
                <img src={listDetail?.bgImg} alt="" />
                <span>歌单</span>
                <i className="iconfont" style={{ paddingTop: "2px" }}>
                  {dotWang(listDetail?.playCount || 0)}
                </i>
              </div>
              <div className="right">
                <h2 className="mul-dot-2">{listDetail?.name}</h2>
                <div className="user">
                  <div className="avatar">
                    <img src={listDetail?.creator?.avatarUrl} alt="" />
                  </div>
                  {listDetail?.creator?.nickname}
                </div>
              </div>
            </div>
          </section>
          <section className="bot">
            <div className="tags">
              标签：
              {listDetail?.tags?.map(item => (
                <em key={item} className="tag-item">
                  {item}
                </em>
              ))}
            </div>
            <div className={`dec ${fullDec ? "" : "mul-dot-2"}`}>
              <div className="brk">{listDetail?.dec}</div>
              <span
                className="arrow"
                onClick={() => setFullDec(!fullDec)}
              ></span>
            </div>
          </section>
        </InfoWrapper>
        <SongsWrapper>
          <h3 className="title">歌曲列表</h3>
          <MusicList isNum list={listDetail?.songs || []}></MusicList>
        </SongsWrapper>
        <Loading show={!listDetail} />
        <Comment
          title={true}
          list={listDetail?.comments}
          theme={{
            theme: "#000",
            l: "#666",
            ll: "#999"
          }}
        />

        <FooterAd>
          <div className="btn-wrap">
            <div className="fot-btn">收藏歌单</div>
          </div>
        </FooterAd>
      </SongsListDetailWrapper>
    </CSSTransition>
  );
}

export default React.memo(SongListDetail);
